<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Management of Advanced Mathematics Tests</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/carousel.css">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
    <link rel="stylesheet" href="../header-footer/common.css">
    <link rel="stylesheet" href="techexam.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <!-- TODO 补充链接 -->
                    <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
                    <li><a href="../Homepage/courseList.html">course</a></li>
                    <li><a href="../Homepage/league.html">Alliance colleges</a></li>
                    <li><a href="../Homepage/about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- TODO 补充链接 -->
        </div>
    </header>

    <!-- 测验管理主内容 -->
    <main class="quiz-manager">
        <div class="quiz-header">
            <h1>Management of Advanced Mathematics Tests</h1>
            <div class="quiz-actions">
                <button id="add-question-btn" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Add title
                </button>
                <button id="save-quiz-btn" class="btn btn-success">
                    <i class="fas fa-save"></i> Save Test
                </button>
                <button id="preview-quiz-btn" class="btn btn-secondary" style="display: none;">
                    <i class="fas fa-eye"></i> Preview Test
                </button>
            </div>
        </div>

        <!-- 测验题目列表 -->
        <div class="quiz-questions" id="quiz-questions">
            <!-- 题目将通过JavaScript动态加载 -->
        </div>

        <!-- 添加/编辑题目模态框 -->
        <div class="modal" id="question-modal">
            <div class="modal-content">
                <span class="close-modal">&times;</span>
                <h2 id="modal-title">Add new topic</h2>
                <form id="question-form">
                    <input type="hidden" id="question-index" value="-1">
                    <div class="form-group">
                        <label for="question-text">Title Content</label>
                        <textarea id="question-text" rows="3" required></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label>option</label>
                        <div class="option-item">
                            <input type="radio" name="correct-option" value="A" checked>
                            <input type="text" id="option-a" placeholder="Option A" required>
                        </div>
                        <div class="option-item">
                            <input type="radio" name="correct-option" value="B">
                            <input type="text" id="option-b" placeholder="Option B" required>
                        </div>
                        <div class="option-item">
                            <input type="radio" name="correct-option" value="C">
                            <input type="text" id="option-c" placeholder="Option C" required>
                        </div>
                        <div class="option-item">
                            <input type="radio" name="correct-option" value="D">
                            <input type="text" id="option-d" placeholder="Option D" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="question-explanation">Title Analysis</label>
                        <textarea id="question-explanation" rows="2"></textarea>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" class="btn btn-cancel">cancel</button>
                        <button type="submit" class="btn btn-primary">Save title</button>
                    </div>
                </form>
            </div>
        </div>
    </main>
  <!-- 页脚 -->
  <footer class="footer">
    <div class="footer-content">
        <div class="footer-logo">
            <a href="#home"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
        </div>
        <div class="footer-text">
            <nav class="footer-nav">
                <ul>
                    <li><a href="../Homepage/about.html">About Us</a></li>
                    <li><a href="../Homepage/contact.html">Contact Us</a></li>
                    <li><a href="../Homepage/privacy.html">Privacy Policy</a></li>
                    <li><a href="../Homepage/terms.html">Term of service</a></li>
                </ul>
            </nav>
            <div class="footer-info">
                <p>&copy; 2025 AceHub reserves all rights</p>
            </div>
        </div>
    </div>
</footer>
 <!--页眉js-->
 <script>
    //Retrieve user information based on token
window.onload = function () {
const userid = localStorage.getItem('token');
//If a user logs in, display their profile picture in the info div; if not, display the login and registration button
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '';
let profileName = '';
let accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../teacher/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/teacher-setting.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                <a href="${profileUrl}">
                    <img id="user-head" src="${user.avatar}" alt="用户头像"></a>
                <div class="card">
                    <ul>
                        <li><a href="${profileUrl}">${profileName}</a></li>
                        <li><a href="${accountUrl}">Account Settings </a></li>
                        <li><a id="logout" href="#logout">Log Out</a></li>
                    </ul>
                </div>
            `;
            //如果点击退出登录，清除token
            document.getElementById('logout').addEventListener('click', () => {
                localStorage.removeItem('token');
                window.location.href = '../Homepage/WebsiteHomepage.html';
            });
        }
        else {
            document.querySelector('.info').innerHTML = `
                <a href="../account/login.html"><button class="login">log on</button></a>
                <a href="../account/register.html"><button class="register">register</button></a>
            `;
        }
    }
</script>
<script>
    if (!localStorage.getItem('token')) {
        alert('Please log in first!');
        window.location.href = '../account/login.html';
    } else if (localStorage.getItem('token') !== 'teacher') {
        alert('You do not have access to this page!');
        window.location.href = '../Homepage/WebsiteHomepage.html';
    }
</script>



    <script src="techexam.js"></script>
</body>
</html>